<template>
	<view class="detail-card">
		<view class="label">
			<view class="l">
				<slot name="label">
					{{label}}
				</slot>
			</view>
			<view class="r">
				<slot name="other"></slot>
			</view>
		</view>
		<view class="content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {

		props: {
			label: {
				type: String,
				default: ''
			},
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.detail-card {
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 32rpx 0;

		&+& {
			margin-top: 32rpx;
			margin-bottom: 32rpx;
		}

		.label {
			position: relative;
			padding-left: 32rpx;
			display: flex;

			&::before {
				left: 0;
				top: 0;
				position: absolute;
				content: "";
				height: 100%;
				width: 4rpx;
				background-color: #0052d9;
			}

			.l {
				flex: 1;
			}

			.r {
				flex: 1;
				text-align: right;
				padding-right: 16rpx;
			}
		}

		.content {
			padding: 32rpx;
		}
	}
</style>